<script lang="ts" setup>
import { ref, defineProps, defineComponent } from "vue"
import { blogComponents, blogComponentsKeys, type BlogComponentsKeys } from "@/lowCodeCop/index"
import { NTag } from "naive-ui"
import atropos from "@cop/atropos/index.vue"
defineProps<{
  copName: BlogComponentsKeys
  index: number
}>()

const clickHandle = () => {
  console.log(1)
}
</script>

<template>
  <atropos :suffix="copName" @click="clickHandle">
    <div class="copBox">
      <span class="copName">
        <n-tag type="error">{{ index + "  " + copName }}</n-tag>
      </span>
      <component :is="blogComponents[copName]"></component>
    </div>
  </atropos>
</template>

<style lang="scss" scoped>
.copBox {
  width: 100%;
  height: 250px;
  background-color: var(--login-tip-bg);
  border: 2px solid var(--login-tip-border-color);
  transition: all 0.3s var(--n-bezier);
  box-sizing: border-box;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .copName {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 999;
  }
}
</style>
